<!--
 * @Description: 填报配置
 * @Author: qingyang
 * @Date: 2022-01-10 16:04:17
 * @LastEditors: qingyang
 * @LastEditTime: 2023-07-26 16:08:06
-->
<template>
  <div class="factor-list-container">
    <CPageTable @register="registerPage" v-model:searchForm="searchForm">
      <template #headerRightButton>
        <el-button type="primary" @click="addTask"
          ><CIcon type="c-xian-xinjian" class="g-mr4"></CIcon>新建配置</el-button
        >
      </template>
      <vxe-column title="配置主题" min-width="150">
        <template #default="scope">
          <CLink @click="seeDetail(scope.row)">{{ empty(scope.row.configName) }}</CLink>
        </template>
      </vxe-column>
      <vxe-column title="发起人">
        <template #default="scope">
          {{ empty(scope.row.creator) }}
        </template>
      </vxe-column>
      <vxe-column title="状态" width="100">
        <template #default="scope">
          <el-tag :type="renderTag(scope.row.status)">{{
            $t18(`factor.${scope.row.status}`)
          }}</el-tag>
        </template>
      </vxe-column>
      <vxe-column title="填报周期" width="100">
        <template #default="scope">
          {{ empty(scope.row.fillPeriod) }}
        </template>
      </vxe-column>
      <vxe-column title="填报频次" width="100">
        <template #default="scope">
          {{ fillFrequencyEnum[scope.row.fillFrequency as 'MONTH' | 'YEAR'] }}
        </template>
      </vxe-column>
      <vxe-column title="更新时间" width="180">
        <template #default="scope">
          {{ empty(scope.row.updateTime) }}
        </template>
      </vxe-column>
      <vxe-column title="操作" width="150" fixed="right">
        <template #default="scope">
          <CTableButtonGroup :buttons-config="getTableButtonsConfig(scope.row)" />
        </template>
      </vxe-column>
    </CPageTable>
    <add-or-edit-task-dialog
      v-model:visible="addOrEditTaskVisible"
      @refresh="handleRefresh"
      :configNo="configNo"
      :configStatus="configStatus"
    ></add-or-edit-task-dialog>
    <detail v-model:visible="detailVisible" :configNo="configNo"></detail>
  </div>
</template>
<script lang="ts">
export default {
  name: 'FillInConfig'
};
</script>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { useFactorList } from './useFactorList';
import { empty } from '@/utils/index';
import { configStatusTypeEnum, fillFrequencyEnum } from '@/constants/enum';
import AddOrEditTaskDialog from './components/AddOrEditTaskDialog/index.vue';
import Detail from './components/detail/index.vue';
import { useMessage } from '@/hooks/useMessage';
import { enableConfig } from '@/apis/eci/dataManagement/config';
import { GetConfigListResult } from '@/apis/eci/dataManagement/model/configModel';
import { CTableButtonGroup } from '@/components/CTable';
import type { TableButtonItem } from '@/components/CTable';
import { CLink } from '@/components/CLink/index';

const { createConfirm, createMessage } = useMessage();
const { searchOptions, searchForm, tableOptions } = useFactorList();
const addOrEditTaskVisible = ref(false);
const detailVisible = ref(false);
const configNo = ref('');
const configStatus = ref<any>('');
const options = reactive<CPageTableProps>({
  title: '填报配置',
  searchOptions,
  tableOptions,
  enableFieldsSetting: false
});
const [registerPage, { refresh }] = useCPageTable(options);

const addTask = () => {
  configNo.value = '';
  configStatus.value = '';
  addOrEditTaskVisible.value = true;
};
const seeDetail = (row: GetConfigListResult) => {
  configNo.value = row.configNo;
  detailVisible.value = true;
};
const edit = (row: GetConfigListResult) => {
  configNo.value = row.configNo;
  configStatus.value = row.status;
  addOrEditTaskVisible.value = true;
};

function getTableButtonsConfig(row: GetConfigListResult): TableButtonItem[] {
  let arr = [{ text: '编辑', onClick: () => edit(row) }];
  if (row.status == configStatusTypeEnum.ON || row.status == configStatusTypeEnum.OFF) {
    arr.push({
      text: row.status == configStatusTypeEnum.ON ? '终止' : '启用',
      onClick: () => enable(row, row.status)
    });
  }
  return arr;
}

const handleRefresh = () => {
  refresh();
};
const enable = (item: any, type: string) => {
  createConfirm(
    type == configStatusTypeEnum.OFF ? '确认启用配置？' : '确认终止配置？',
    type == configStatusTypeEnum.OFF
      ? '是否确认启用？'
      : `若终止【${item.configName}】，后续将不再下发填报任务，是否终止？`,
    {
      iconType: 'warning',
      btnType: type == configStatusTypeEnum.OFF ? 'primary' : '',
      confirmButtonText: type == configStatusTypeEnum.OFF ? '启用' : '终止'
    }
  ).then(async () => {
    enableConfig(
      item.configNo,
      type == configStatusTypeEnum.OFF ? configStatusTypeEnum.ON : configStatusTypeEnum.OFF
    ).then(() => {
      createMessage.success(type == configStatusTypeEnum.OFF ? '启用成功！' : '终止成功！');
      refresh();
    });
  });
};
const renderTag = (status: string) => {
  switch (status) {
    case configStatusTypeEnum.ON:
      return 'success';
    case configStatusTypeEnum.NEW:
      return '';
    default:
      return 'info';
  }
};
</script>

<style lang="scss" scoped>
.factor-list-container {
  min-height: 80%;
}
</style>
